<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="addShow = true" plain>添加</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-input v-model="ename" placeholder="请输入要搜索的姓名" @input="selectAll()" />
          </el-form-item>
        </el-form>
        <el-table :data="empList" border>
          <el-table-column prop="eid" label="ID" width="50px" />
          <el-table-column prop="eavatar" label="头像" width="80px">
            <template #default="scope">
              <el-avatar :size="50" :src="'http://localhost:8080/upload/' + scope.row.eavatar" />
            </template>
          </el-table-column>
          <el-table-column prop="ename" label="姓名" width="90px" />
          <el-table-column prop="eage" label="年龄" width="70px" />
          <el-table-column prop="egender" label="性别" width="70px" />
          <el-table-column prop="ephone" label="电话" />
          <el-table-column prop="eaddr" label="居住地址" />
          <el-table-column prop="eentrydate" label="入职日期" />
          <el-table-column prop="estate" label="状态" width="70px" align="center">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.estate == 1">在职</el-tag>
              <el-tag type="info" v-else>休假</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="分配部门 "width="100px">
            <template #default="scope">
              <el-popover placement="right" :width="40" trigger="hover">
                <template #reference>
                  <el-button size="small" plain type="primary" @click="allDeptDialog(scope.row.eid)">
                    分配部门
                  </el-button>
                </template>
                <el-table :data="scope.row.depts">
                  <el-table-column property="dname" label="部门" />
                </el-table>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" plain type="warning" @click="selectByEid(scope.row.eid)">
                修改
              </el-button>
              <el-button size="small" plain type="danger" @click="deleteByEid(scope.row.eid)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
  <!-- 添加对话框开始 -->
  <el-dialog v-model="addShow" title="添加员工" width="500">
    <el-form>
      <el-form-item label="头像" label-width="20%">
        <el-upload class="avatar-uploader" action="http://localhost:8080/admin/upload" name="pic" :headers="headers"
          :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" label-width="20%">
        <el-input v-model="empAdd.ename" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-form-item label="年龄" label-width="20%">
        <el-input v-model="empAdd.eage" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-form-item label="性别" label-width="20%">
        <el-radio-group v-model="empAdd.egender">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入职日期" label-width="20%">
        <el-date-picker v-model="empAdd.eentrydate" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" style="width: 300px" />
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="empAdd.ephone" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-form-item label="居住地址" label-width="20%">
        <el-input v-model="empAdd.eaddr" autocomplete="off" style="width: 300px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addShow = false">
          取消
        </el-button>
        <el-button type="primary" @click="insert">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加对话框结束 -->

  <!-- 修改对话框开始 -->
  <el-dialog v-model="updateShow" title="修改员工" width="500">
    <el-form>
      <el-form-item label="头像" label-width="20%">
        <el-upload class="avatar-uploader" action="http://localhost:8080/admin/upload" name="pic" :headers="headers"
          :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccessUpdate">
          <img :src="imageUrlUpdate" class="avatar" />
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" label-width="20%">
        <el-input v-model="empUpdate.ename" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-form-item label="状态" label-width="20%">
        <el-radio-group v-model="empUpdate.estate">
          <el-radio :value="1">在职</el-radio>
          <el-radio :value="2">休假</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" label-width="20%">
        <el-input v-model="empUpdate.eage" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-form-item label="性别" label-width="20%">
        <el-radio-group v-model="empUpdate.egender">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入职日期" label-width="20%">
        <el-date-picker v-model="empUpdate.eentrydate" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" style="width: 300px" />
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="empUpdate.ephone" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-form-item label="居住地址" label-width="20%">
        <el-input v-model="empUpdate.eaddr" autocomplete="off" style="width: 300px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateShow = false">
          取消
        </el-button>
        <el-button type="primary" @click="update">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改对话框结束 -->

    <!-- 分配员工对话框开始 -->
    <el-dialog v-model="setDeptShow" title="添加部门">
        <el-transfer v-model="selectedDids" :data="allDeptList" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="setDeptShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="insertEidAndDid">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 分配员工对话框结束 -->
</template>
<script setup>
import employeeApi from '@/api/employeeApi';
import { computed, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElLoading } from 'element-plus';
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();
//添加部门模态框显示
const setDeptShow=ref(false);
//搜索姓名关键字
const ename = ref('');
//查询出的所有员工信息
const empList = ref([]);
//上传图片的地址
const imageUrl = ref("");
//修改图片的ref
const imageUrlUpdate = ref("");
//添加对话框的状态
const addShow = ref(false);
//修改对话框的状态
const updateShow = ref(false);
//添加员工信息
const empAdd = ref({
  ename: '',
  eage: '',
  egender: '男',
  eentrydate: '',
  ephone: '',
  eaddr: '',
  estate: 1,
  eavatar: '',
});
//修改员工信息
const empUpdate = ref({
  eid: 0,
  ename: '',
  eage: '',
  egender: '男',
  eentrydate: '',
  ephone: '',
  eaddr: '',
  estate: 1,
  eavatar: '',
});
//所有部门信息
const allDeptList = ref([]);
//被选中部门的dids
const selectedDids = ref([])
//需要被分配部门的员工eid
const selectedEid = ref(0);

//计算属性
const headers = computed(() => {
    let token = tokenStore.tokenStr;
    return {
        token
    }
})

//分配部门
function insertEidAndDid(){
    employeeApi.insertEidAndDid(selectedEid.value,selectedDids.value)
        .then(resp => {
          if(resp.code == 10000){
          //弹出消息
          ElMessage.success(resp.msg);
            //隐藏对话框
            setDeptShow.value = false;
            selectAll();
          }else{
            //隐藏对话框
            setDeptShow.value = false;
            ElMessage.error(resp.msg)
          }
        })
}
//查询所有可选部门信息
function allDeptDialog(eid){
    employeeApi.allDept(eid)
        .then(resp => {
          allDeptList.value=resp.data.allDeptList;
          selectedDids.value=resp.data.selectedDids;
          selectedEid.value=eid;
          setDeptShow.value=true;
        
        })
}

//修改
function update() {
  employeeApi.update(empUpdate.value)
    .then(resp => {
      if (resp.code == 10000) {
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1500
        })
        selectAll();
        updateShow.value = false;
      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 1500
        });
      }
    })

}
//添加
function insert() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  employeeApi.insert(empAdd.value)
    .then(resp => {
      loading.close();
      if (resp.code == 10000) {
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1500
        })
        addShow.value = false;
        empAdd.value = {
          ename: '',
          eage: '',
          egender: '男',
          eentrydate: '',
          ephone: '',
          eaddr: '',
          estate: 1,
          eavatar: '',
        }
        imageUrl.value = '';
        selectAll();
      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 1500
        });
        empAdd.value = {
          ename: '',
          eage: '',
          egender: '男',
          eentrydate: '',
          ephone: '',
          eaddr: '',
          estate: 1,
          eavatar: '',
        }
      }
    });
}
//根据eid查询
function selectByEid(eid) {
  employeeApi.selectByEid(eid)
    .then(resp => {
      empUpdate.value = resp.data;
      imageUrlUpdate.value = "http://localhost:8080/upload/" + resp.data.eavatar;
      updateShow.value = true;
    })
}

//查询所有员工
function selectAll() {
  employeeApi.selectAll(ename.value)
    .then(resp => {
      empList.value = resp.data
    })
}
//删除员工
function deleteByEid(eid) {
  ElMessageBox.confirm(
    '确认删除该员工?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      employeeApi.delete(eid)
        .then(resp => {
          if (resp.code == 10000) {
            ElMessage({
              message: resp.msg,
              type: 'success',
              duration: 1500
            })
            selectAll();
          } else {
            ElMessage({
              message: resp.msg,
              type: 'error',
              duration: 1500
            });
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}
//参数表示选中的图片
function beforeAvatarUpload(rawFile) {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片格式有误')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片不能超过2M!')
    return false
  }
  return true
}
//成功上传之后的回调
function handleAvatarSuccess(resp, uploadFile) {
  if (resp.code == 10000) {
    ElMessage.success(resp.msg);
    imageUrl.value = "http://localhost:8080/upload/" + resp.data;
    empAdd.value.eavatar = resp.data;
  }
}
//修改上传之后的回调
function handleAvatarSuccessUpdate(resp, uploadFile) {
  if (resp.code == 10000) {
    ElMessage.success(resp.msg);
    imageUrlUpdate.value = "http://localhost:8080/upload/" + resp.data;
    empUpdate.value.eavatar = resp.data;
  }
}
selectAll();
</script>
<style scoped>
.avatar-uploader,
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dotted #dcdfe6;
  border-radius: 5px;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>